<template>
  <view class="list">
    <!-- 骨架屏 -->
    <view class="skeleton-view" v-if="searchLoad">
      <view
        class="skeleton-item"
        v-for="(item, index) in Array(3)"
        :key="index"
      >
        <u-skeleton rows="3" loading :title="false" />
      </view>
    </view>

    <block v-else>
      <block v-if="searchList.length">
        <craftsman-list :list="searchList" v-if="searchType" />
        <service-list :list="searchList" v-else />
      </block>
      <view class="no-list text-center" v-else>
        <image src="@/static/image/search/default.png" mode="widthFix" />
        <view class="text">没有搜到～换关键字试试吧</view>
      </view>

      <view class="more">
        <view class="title">
          更多推荐
          <view class="line"></view>
        </view>
        <service-list :list="moreList" />
      </view>
    </block>

    <u-loadmore
      :status="searchLoadStatus"
      v-show="searchLoadStatus !== 'nomore'"
    />
  </view>
</template>

<script>
export default {
  props: {
    searchLoad: {
      type: Boolean,
      default: false,
    },
    searchLoadStatus: {
      type: String,
      default: "nomore",
    },
    searchType: {
      type: Number,
      default: 0,
    },
    searchList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    moreList: {
      type: Array,
      default: () => {
        return [1, 1, 1, 1, 1, 1, 1, 1, 1];
      },
    },
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.skeleton-view {
  .skeleton-item {
    padding: 20px 0;
  }
}

.more {
  margin-top: 30px;
  color: #333333;
  text-align: center;

  .line {
    background: #333;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    margin: 4px auto 0;
  }
}

.no-list {
  padding-top: 20px;

  image {
    width: 160px;
  }

  .text {
    color: #aeaeae;
    margin-top: 10px;
  }
}
</style>